            
                <section class="row">
                    <div class="col-12">
                        <div>
                            <h1>Form Wizard</h1>
                        </div>
                        <div>
                            <ol class="breadcrumb">
                                <li><a href="#"><i class="glyphicon glyphicon-home"></i></a></li>
                                <li>Forms</li>
                                <li class="active">Form Wizard</li>
                            </ol>
                        </div>
                    </div>
                </section>
                
            <div class="ajax-container">
                <section class="row">
                    <div class="col-12">
                        <div class="panel panel-default">
                            <div class="panel-heading">
                                <h2 class="panel-title">Form Wizard</h3>
                            </div>
                            <div class="panel-body form-container">
                                
                                <style type="text/css">
                                    
                                    .wizard a {
                                        padding: 10px 12px 10px;
                                        margin-right: 5px;
                                        background: #efefef;
                                        position: relative;
                                        display: inline-block;
                                    }
                                    .wizard a:before {
                                        width: 0;
                                        height: 0;
                                        border-top: 20px inset transparent;
                                        border-bottom: 20px inset transparent;
                                        border-left: 20px solid #fff;
                                        position: absolute;
                                        content: "";
                                        top: 0;
                                        left: 0;
                                    }
                                    .wizard a:after {
                                        width: 0;
                                        height: 0;
                                        border-top: 20px inset transparent;
                                        border-bottom: 20px inset transparent;
                                        border-left: 20px solid #efefef;
                                        position: absolute;
                                        content: "";
                                        top: 0;
                                        right: -20px;
                                        z-index: 2;
                                    }
                                    .wizard a:first-child:before,
                                    .wizard a:last-child:after {
                                        border: none;
                                    }
                                    .wizard a:first-child {
                                        -webkit-border-radius: 4px 0 0 4px;
                                           -moz-border-radius: 4px 0 0 4px;
                                                border-radius: 4px 0 0 4px;
                                    }
                                    .wizard a:last-child {
                                        -webkit-border-radius: 0 4px 4px 0;
                                           -moz-border-radius: 0 4px 4px 0;
                                                border-radius: 0 4px 4px 0;
                                    }
                                    .wizard .badge {
                                        margin: 0 5px 0 18px;
                                        position: relative;
                                        top: -1px;
                                    }
                                    .wizard a:first-child .badge {
                                        margin-left: 0;
                                    }
                                    .wizard .current {
                                        background: #007ACC;
                                        color: #fff;
                                    }
                                    .wizard .current:after {
                                        border-left-color: #007ACC;
                                    }


                                    /* ff anti-aliasing bug - http://coderwall.com/p/tpmsta */
                                    .mywizard li {
                                        position: relative;
                                        background: #f5f5f5;
                                        padding-right: 30px;
                                        padding-left: 5px;
                                    }

                                    .mywizard li a:after, .mywizard li a:before {
                                        left: 100%;
                                        border: solid transparent;
                                        content: " ";
                                        height: 0;
                                        width: 0;
                                        position: absolute;
                                        pointer-events: none;
                                    }

                                    .mywizard li a:after {
                                        border-color: rgba(245, 245, 245, 0);
                                        border-left-color: #f5f5f5;
                                        border-width: 20px;
                                        top: 50%;
                                        margin-top: -20px;
                                        margin-left: -30px;
                                    }

                                    .mywizard li a:before {
                                        border-color: rgba(255, 255, 255, 0);
                                        border-left-color: #fff;
                                        border-width: 30px;
                                        top: 50%;
                                        margin-top: -30px;
                                        margin-left: -30px;
                                    }
                                    .mywizard li .badge {
                                        vertical-align: text-bottom;
                                        padding-top: 3px;
                                    }
                                </style>
                                
                                <h3>Breadcrumb</h3>
                                <ul class="breadcrumb">
                                    <li><a href="#">Home</a> <span class="divider">/</span></li>
                                    <li><a href="#">Library</a> <span class="divider">/</span></li>
                                    <li class="active">Data</li>
                                </ul>

                                <ul class="breadcrumb">
                                    <li><a href="#"><span class="badge">1</span> Set Global Properties</a> <span class="divider">/</span></li>
                                    <li><a href="#"><span class="badge">2</span> Specify Entry Scheme</a> <span class="divider">/</span></li>
                                    <li class="active"><a href="#"><span class="badge badge-inverse">3</span> Create Test Entry</a> <span class="divider">/</span></li>
                                    <li><a href="#"><span class="badge">4</span> Check Your Data and Generate Portal</a></li>
                                </ul>

                                <h3>Wizard</h3>
                                <div class="wizard">
                                    <a><span class="badge">1</span> Set Global Properties</a>
                                    <a><span class="badge">2</span> Specify Entry Scheme</a>
                                    <a class="current"><span class="badge badge-inverse">3</span> Create Test Entry</a>
                                    <a><span class="badge">4</span> Check Your Data and Generate Portal</a>
                                </div>

                                <h3>Breadcrumb Wizard</h3>
                                <ul class="breadcrumb mywizard">
                                    <li><a href="#"><span class="badge">1</span> Home</a></li>
                                    <li><a href="#"><span class="badge">2</span> Library</a></li>
                                    <li class="active"><span class="badge">3</span> Data</li>
                                </ul>

                            </div>
                        </div>
                    </div>
                </section>
                
                <section class="row">
                    <div class="col-12">
                        <div class="panel panel-default">
                            <div class="panel-heading">
                                <h2 class="panel-title">Form Wizard</h3>
                            </div>
                            <div class="panel-body form-container">
                                <div class="guideline form-guideline guideline-sticky bg-info">
                                    <i class="fa fa-info-circle fa-lg"></i> Fields marked with <code>*</code> are required.
                                </div>
                                <form id="form-wizard" action="<?= base_url() ?>services/cms-validation" method="post" class="form-bordered form-horizontal">
                                    <fieldset id="personal-info" class="step">
                                        <legend>Personal Information</legend>
                                        <ul>
                                            <li class="form-group row">
                                                <label for="photo" class="control-label col-3">
                                                    Photo <br>
                                                    <small>(.jpg .png .gif)</small>
                                                </label>
                                                <div class="control-group col-9">
                                                    <div class="input-size">
                                                        <div class="fileinput fileinput-new" data-provides="fileinput">
                                                            <div class="fileinput-new thumbnail" style="width: 200px; height: 150px;">
                                                                <img src="http://localhost/ci_bootstrap/resources/images/no_image.gif" data-src="http://localhost/ci_bootstrap/resources/images/no_image.gif" alt="...">
                                                            </div>
                                                            <div class="fileinput-preview fileinput-exists thumbnail" style="max-width: 200px; max-height: 150px;"></div>
                                                            <div>
                                                                <span class="btn btn-default btn-file"><span class="fileinput-new">Select image</span><span class="fileinput-exists">Change</span><input name="photo" id="photo" type="file"></span>
                                                                <a href="#" class="btn btn-default fileinput-exists" data-dismiss="fileinput">Remove</a>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </li>
                                            <li class="form-group row">
                                                <label for="first-name" class="control-label col-3">
                                                    First Name* <br>
                                                    <small>(alpha characters)</small>
                                                </label>
                                                <div class="control-group col-9">
                                                    <div class="input-size col-12">
                                                        <div class="input-group">
                                                            <span class="input-group-addon"><i class="fa fa-user"></i></span>
                                                            <input type="text" name="first-name" id="first-name" class="form-control" placeholder="Mark Angelo">
                                                        </div>
                                                    </div>
                                                </div>
                                            </li>
                                            <li class="form-group row">
                                                <label for="last-name" class="control-label col-3">
                                                    Last Name* <br>
                                                    <small>(alpha characters)</small>
                                                </label>
                                                <div class="control-group col-9">
                                                    <div class="input-size col-12">
                                                        <div class="input-group">
                                                            <span class="input-group-addon"><i class="fa fa-user"></i></span>
                                                            <input type="text" name="last-name" id="last-name" class="form-control" placeholder="Angulo">
                                                        </div>
                                                    </div>
                                                </div>
                                            </li>
                                            <li class="form-group row">
                                                <label for="birthdate" class="control-label col-3">
                                                    Birth Date* <br>
                                                    <small>(mm/dd/yyyy)</small>
                                                </label>
                                                <div class="control-group col-9">
                                                    <div class="input-size">
                                                        <div class="input-group">
                                                            <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                                                            <input type="text" name="birthdate" id="birthdate" class="form-control" placeholder="Birth Date">
                                                        </div>
                                                    </div>
                                                </div>
                                            </li>
                                            <li class="form-group row">
                                                <label for="gender" class="control-label col-3">
                                                    Gender* <br>
                                                    <small>(male/female)</small>
                                                </label>
                                                <div class="control-group col-9">
                                                    <div class="input-size">
                                                        <div class="radio">
                                                            <label class="control-label"><input type="radio" name="gender" value="Male" checked="checked">Male</label>
                                                        </div>
                                                        <div class="radio">
                                                            <label class="control-label"><input type="radio" name="gender" value="Female">Female</label>
                                                        </div>
                                                    </div>
                                                </div>
                                            </li>
                                        </ul>
                                    </fieldset>
                                    
                                    <fieldset id="account-info" class="step">
                                        <legend>Account Information</legend>
                                        <ul>
                                            <li class="form-group row">
                                                <label for="username" class="control-label col-3">
                                                    Username* <br>
                                                    <small>(must be unique)</small>
                                                </label>
                                                <div class="control-group input-center col-9">
                                                    <div class="input-size col-12">
                                                        <div class="input-group">
                                                            <span class="input-group-addon"><i class="fa fa-user"></i></span>
                                                            <input type="text" name="username" id="username" class="form-control" placeholder="Username">
                                                        </div>
                                                    </div>
                                                </div>
                                            </li>
                                            <li class="form-group row">
                                                <label for="email" class="control-label col-3">
                                                    Email* <br>
                                                    <small>(must be unique)</small>
                                                </label>
                                                <div class="control-group input-center col-9">
                                                    <div class="input-size col-12">
                                                        <div class="input-group">
                                                            <span class="input-group-addon"><i class="fa fa-envelope"></i></span>
                                                            <input type="text" name="email" id="email" class="form-control" placeholder="markangeloangulo@gmail.com">
                                                        </div>
                                                    </div>
                                                </div>
                                            </li>
                                            <li class="form-group row">
                                                <label for="password" class="control-label col-3">
                                                    Password* <br>
                                                    <small>(pci password)</small>
                                                </label>
                                                <div class="control-group col-9">
                                                    <div class="input-size">
                                                        <div class="input-group">
                                                            <span class="input-group-addon"><i class="fa fa-lock"></i></span>
                                                            <input type="password" name="password" id="password" class="form-control" placeholder="P4ssw0rd">
                                                        </div>
                                                    </div>
                                                </div>
                                            </li>
                                            <li class="form-group row">
                                                <label for="confirm-password" class="control-label col-3">
                                                    Confirm Password* <br>
                                                    <small>(must match with password)</small>
                                                </label>
                                                <div class="control-group col-9">
                                                    <div class="input-size">
                                                        <div class="input-group">
                                                            <span class="input-group-addon"><i class="fa fa-unlock"></i></span>
                                                            <input type="password" name="confirm-password" id="confirm-password" class="form-control" placeholder="Retype Password">
                                                        </div>
                                                    </div>
                                                </div>
                                            </li>
                                        </ul>
                                    </fieldset>
                                    
                                    <fieldset id="additional-info" class="step">
                                        <legend>Additional Information</legend>
                                        <ul>
                                            <li class="form-group row">
                                                <label for="mobile" class="control-label col-3">
                                                    Mobile <br>
                                                    <small>(Philippine format)</small>
                                                </label>
                                                <div class="control-group col-9">
                                                    <div class="input-size">
                                                        <div class="input-group">
                                                            <span class="input-group-addon"><i class="fa fa-mobile"></i></span>
                                                            <input type="text" name="mobile" id="mobile" class="form-control" placeholder="(+63)926-408-5811">
                                                        </div>
                                                    </div>
                                                </div>
                                            </li>
                                            <li class="form-group row">
                                                <label for="address" class="control-label col-3">
                                                    Address <br>
                                                    <small>(alpha-numeric characters)</small>
                                                </label>
                                                <div class="control-group col-9">
                                                    <div class="input-size">
                                                        <div class="input-group">
                                                            <span class="input-group-addon"><i class="fa fa-home"></i></span>
                                                            <input type="text" name="address" id="address" class="form-control" placeholder="#143 Purok 15, Irisan Baguio City">
                                                        </div>
                                                    </div>
                                                </div>
                                            </li>
                                            <li class="form-group row">
                                                <label for="country" class="control-label col-3">
                                                    Country <br>
                                                    <small>(Select One)</small>
                                                </label>
                                                <div class="control-group col-9">
                                                    <div class="input-size">
                                                        <div class="input-group">
                                                            <span class="input-group-addon"><i class="fa fa-globe"></i></span>
                                                            <select name="country" id="country" class="form-control">
                                                                <option value="" selected="selected"> - Select Country - </option>
                                                                <option value="PH">Philippines</option>
                                                                <option value="US">United States</option>
                                                            </select>
                                                        </div>
                                                    </div>
                                                </div>
                                            </li>
                                            <li class="form-group row">
                                                <label for="about" class="control-label col-3">
                                                    About <br>
                                                    <small>(Optional)</small>
                                                </label>
                                                <div class="control-group col-9">
                                                    <div class="input-size">
                                                        <textarea name="about" id="vertical-about" class="form-control" placeholder="About..."></textarea>
                                                    </div>
                                                </div>
                                            </li>
                                        </ul>
                                    </fieldset>
                                    <div class="submit-group col-12 align-right">
                                        <input type="reset" name="reset" class="btn btn-danger" value="Reset">
                                        <input type="submit" name="submit" class="btn btn-primary" value="Submit">
                                        <input type="button" name="cancel" class="btn btn-default" value="Cancel">
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </section>
                <!-- page-script -->
                <script src="<?= base_url() ?>js/scripts/form-wizard.js"></script>
            </div>